<template>
    <div>
        <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="发起提交">
                <k-form-build :value="jsonData" ref="form"/>
                <a-card title="流程" :bordered="false">
                    <a-form-model
                            ref="ruleForm"
                            :model="form"
                            :rules="rules"
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                    >
                        <a-form-model-item :wrapper-col="{ span: 22, offset: 2 }">
                            <a-timeline class="process-timeline">
                                <a-timeline-item :key="item.taskId" v-for="item in taskList">
                                        <div>{{ item.taskName }}</div>
                                        <div class="task-info">
                                          <ul class="taskName">
                                            <li>{{getTaskLabel(item)}}</li>
                                          </ul>
                                          <ul class="users">
                                            <li class="user"  v-if="item.assignee">
                                              <a-avatar shape="square"   icon="user"/>
                                              <span>{{item.assignee}}</span>
                                            </li>
                                            <template v-if="item.candidateUsers && item.candidateUsers.length>0">
                                              <li class="user">
                                                <div class="sequ">
                                                  <a-icon  class="sequ-icon" type="more" />
                                                </div>
                                              </li>
                                              <li class="user" v-for="t in item.candidateUsers">
                                                <a-avatar shape="square" :style="{ backgroundColor: '#87d068', verticalAlign: 'middle' }">候选</a-avatar>
                                                <span>{{t}}</span>
                                              </li>
                                            </template>
                                            <template v-if="item.candidateGroups && item.candidateGroups.length>0">
                                              <li class="user">
                                                <div class="sequ">
                                                  <a-icon  class="sequ-icon" type="more"  />
                                                </div>
                                              </li>
                                              <li class="user" v-for="t in item.candidateGroups">
                                                <a-avatar shape="square" :style="{ backgroundColor: '#1890ff', verticalAlign: 'middle' }">角色</a-avatar>
                                                <span>{{t}}</span>
                                              </li>
                                            </template>

                                            <template v-if="item.isMulti && item.assigneeUsers && item.assigneeUsers.length > 0">
                                              <template  v-for="(t,index) in item.assigneeUsers">
                                                <li class="user" >
                                                    <a-avatar shape="square" icon="user"/>
                                                    <span>{{t}}</span>
                                                </li>
                                                <li class="user" v-if="index != (item.assigneeUsers.length-1)">
                                                  <div class="sequ">
                                                    <a-icon  class="sequ-icon" type="right" style="font-size: 10px" v-if="item.isSequential" />
                                                    <a-icon  class="sequ-icon" type="plus" v-else style="font-size: 10px"  />
                                                  </div>
                                                </li>
                                              </template>
                                            </template>
                                            <li v-if="!item.assign && (!item.candidateUsers || item.candidateUsers.length ===0) && (!item.candidateGroups || item.candidateGroups.length ===0) && (!item.assigneeUsers || item.assigneeUsers.length ===0)">
                                              <a-button type="dashed"  icon="plus">
                                              </a-button>
                                            </li>
                                          </ul>
                                        </div>
                                </a-timeline-item>
                            </a-timeline>
                        </a-form-model-item>
                        <a-form-model-item v-if="loaded" :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
                            <a-button type="primary" @click="getData">提交</a-button>
                            <a-button style="margin-left: 10px;">重置</a-button>
                        </a-form-model-item>
                    </a-form-model>
                </a-card>
            </a-tab-pane>
            <a-tab-pane key="2" tab="查看数据">
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script>
import { getStartForm, getUserTaskList } from '@/api/process'

export default {
  name: 'StartForm',
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      loaded: false,
      jsonData: {},
      taskList: [],
      form: {},
      rules: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      if (!this.$route.query.processKey) {
        return
      }
      getStartForm({ processKey: this.$route.query.processKey }).then(({ data }) => {
        if (data) {
          document.title = `发起流程-${data.processName}`
          this.jsonData = data.formData || {}
          if (Object.keys(this.jsonData).length > 0) {
            this.loaded = true
          }
        } else {
          this.loaded = false
        }
        // eslint-disable-next-line handle-callback-err
      }).catch(err => {
        this.loaded = false
      })

      getUserTaskList({ processKey: this.$route.query.processKey }).then(({ data }) => {
        if (data) {
          this.taskList = data
        }
      }).catch(err => {
      })
    },
    getData() {
      // 通过函数获取数据
      this.$refs.form.getData()
        .then(res => {
          // 获取数据成功
          alert(JSON.stringify(res))
        })
        .catch(err => {
          console.log(err, '校验失败')
        })
    },
    getTaskLabel(item) {
      const list = []
      if (item.assignee) {
        list.push('1人审批')
      }
      if (item.isMulti && item.assigneeUsers && item.assigneeUsers.length > 0) {
        if (item.isSequential) {
          list.push(`${item.assigneeUsers.length}人依次审批`)
        } else {
          list.push(`${item.assigneeUsers.length}人会签`)
        }
      }

      if (item.candidateUsers && item.candidateUsers.length > 0) {
        list.push(`${item.candidateUsers.length}人候选`)
      }

      if (item.candidateGroups && item.candidateGroups.length > 0) {
        list.push(`${item.candidateGroups.length}个角色`)
      }

      if (list && list.length === 0) {
        list.push(`请选择审批人`)
      }
      console.log(list)
      return list.join(' ')
    }
  }
}
</script>
<style lang="scss">
    .process-timeline {
        .task-info{
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
        }
        ul {
            padding: 0px;
            color: rgba(0, 0, 0, .45);
            transition: color .3s cubic-bezier(.215, .61, .355, 1);
        }

        ul li {
            list-style: none;
        }

        .taskName {
            width: 50%;
            font-size: 12px;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .users {
            width: 50%;
            /* 父盒子设置为伸缩盒子*/
            display: flex;
            /* wrap:  在必要的时候进行换行*/
            flex-wrap: wrap;
            /* flex-start:  默认从头开始排列*/
            justify-content: flex-start;

          .user{
              font-size: 12px;
              /* 右边距，默认使用css函数去计算 */
              margin-right: calc(10% / 8);

            span{
              display: block;
              text-align: center;
              }

            .ant-avatar{
              margin:0 auto ;
            }

            li {
                line-height: 62px;
              }

            .sequ{
              position: relative;
              width: 10px;
            }
            .sequ-icon{
              position: absolute;
              top:10px
            }
            }

        }
    }

</style>
